<template>
    <div class="echats-content">
        <div :id="chartId" :style="{width: nomalWidth, height: '350px'}"></div>
    </div>
</template>

<script>
import echarts from 'echarts'
export default {
    name:'charts',
    data (){
        return {
	        nomalWidth:'1000px'
        }
    },
    props:['options','chartId'],
    methods:{
        drawLine:function(){
            let myChart =echarts.init(document.getElementById(this.chartId));
            myChart.setOption(this.options)
        }
    },
    watch:{options:{
    	handler:function(newVal,oldVal){
            this.drawLine(newVal);
        },
        deep:true
    }}
}
</script>
<style scoped>
    .echats-content{
        margin:25px 20px;
    }
</style>
